<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
<title>title</title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		$('#searchBtn').click(function(){
			var searchCommand=$('select option:selected').val();
			var searchValue=$('#search').val();
			
			if(searchValue==""){
				location.href="/OffTheRecord/getBoardListByPage.action?pageNo=1";
			}
			location.href="/OffTheRecord/getBoardBySearch.action?searchCommand="+searchCommand+"&searchValue="+searchValue;
		});
	});
</script>
</head>
<body>
<c:import url="../common/top.jsp"></c:import>
<div class="container" style="margin: 60px;"></div>

<div class="container">
<div class="row">
<div class="col-xs-1 col-sm-1 col-md-1 col-lg-1"></div>

<div class="col-xs-10 col-sm-10 col-md-10 col-lg-10">
	
<div class=" col-xs-12 col-sm-12 col-md-12 col-lg-12">
	<div class="jumbotron">
		<strong>자유게시판</strong>
	</div>
</div>
	  
<div class="col-xs-12 col-sm-12 col-md-12- col-lg-12">
	<div class="bs-example">
      	<div class="table-responsive">
        	<table class="table table-hover">
          		<thead>
            		<tr>
              			<th>#</th>
		              	<th style="width: 100px;">작성자</th>
		              	<th></th>
		              	<th style="width: 400px;">제목</th>
		              	<th>작성일자</th>
		              	<th>조회수</th>
            		</tr>
          		</thead>
          		
          	<c:forEach var="board" items="${ requestScope.boardList.list }">
          		<tbody>
            		<tr>
              			<td>${ board.boardId }</td>
              			<td>${ board.boardUserId }</td>
              			<td>
              				<c:if test="${ board.fileExist=='1' }">
             	  				<span class="glyphicon glyphicon-picture"></span>
             				</c:if>
             				<c:if test="${ board.fileExist=='0' }">
             	  				<span class="glyphicon glyphicon-comment"></span>
             				</c:if>
              			</td>
              			<td><a href="/OffTheRecord/getOneBoardById.action?boardId=${ board.boardId }">${ board.boardTitle }</a></td>
              			<td>${ board.boardWriteDate }</td>
              			<td>${ board.boardHits }</td>
            		</tr>
          		</tbody>
          	</c:forEach>
        	</table>
      	</div><!-- /.table-responsive -->
      	<hr>
		<p>
	
	<c:set var="pb" value="${ requestScope.boardList.pagingBean }"/>

	<c:if test="${ pb.previousPageGroup }">
		<a href="/OffTheRecord/getBoardListByPage.action?pageNo=${ pb.startPageOfPageGroup-1 }">
		<img src="/OffTheRecord/img/left_arrow_btn.gif"></a>
	</c:if>
	
	<div align="center">
	<c:forEach var="i" begin="${ pb.startPageOfPageGroup }" end="${ pb.endPageOfPageGroup }">
		<c:choose>
			<c:when test="${ pb.nowPage!=i }">
					<a href="/OffTheRecord/getBoardListByPage.action?pageNo=${i}">${i}</a>
			</c:when>
			<c:otherwise>
			${i}
			</c:otherwise>
		</c:choose>
		&nbsp;
	</c:forEach>
	</div>

	<c:if test="${ pb.nextPageGroup }">
		<a href="/OffTheRecord/getBoardListByPage.action?pageNo=${ pb.endPageOfPageGroup+1 }">
		<img src="/OffTheRecord/img/right_arrow_btn.gif"></a>
	</c:if><br><br>
	
	<c:if test="${ sessionScope.adminVo!=null }">
	<div style="float: right;">
	<button class="btn btn-default" onclick="location.href='/OffTheRecord/board/board_write.jsp'">글 작성</button>
	</div>
	</c:if>
	<div style="float: right;">
		<select id="searching">
			<option value="searchingTitle">제목</option>
			<option value="searchingContent">내용</option>
			<option value="searchingId">글쓴이(ID)</option>
		</select>
		<input type="text" id="search" placeholder="검색값을 입력하세요.">
		<button class="btn btn-default btn-sm" id="searchBtn">검색</button> 
		<c:if test="${ sessionScope.userVo!=null }">
			<button class="btn btn-default btn-sm" onclick="javascript:location.href='/OffTheRecord/board/board_write.jsp'">글 작성</button>
		</c:if>
	</div>
    </div>

</div>
<!--  -->
	</div>

	<div class="col-xs-1 col-sm-1 col-md-1 col-lg-1"></div>
</div><!-- row -->
</div><!-- container -->

<div style="height: 50px; background-color: white;"></div> 
</body>
</html>